<template>
  <div class="lix-user">
    <LixCell label="头像" isAvatar />
    <LixCell label="昵称" :value="user.nickname" />
    <LixCell label="姓名" :value="user.realname" @tap="editName"/>
    <LixCell label="性别" :value="user.gender == 0 ? '未设置' : user.gender == '1' ? '男' : '女'" @tap="editGender"/>
    <LixCell label="生日" :value="user.birthday === null ? '未设置' : user.birthday" @tap="editDate"/>
    <LixCell label="婚姻状况" :value="user.marriage == 0 ? '未设置' : user.marriage == 1 ? '已婚' : '未婚'" @tap="editMarriage"/>
    <LixCell label="子女数目" :value="user.children" v-if="user.marriage == 1" @tap="editChildren"/>
    <!-- <LixCell label="民族" value="" /> -->
    <!-- <LixCell label="认证等级" rate=3 /> -->
    <LixCell label="爱好分类" :value="hobbyText" @tap="editFavorite"/>
  </div>
</template>

<script>
import LixCell from '@/components/lix-cell';
import { USER_GET_INFO } from '../../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';

export default {
  components: {
    LixCell
  },
  computed: {
    ...mapGetters('user', {
      user: 'user'
    })
  },
  data() {
    return {
      hobbyText: '未设置'
    };
  },
  onShow() {
    if (this.user.hobby.length === 0) {
      this.hobbyText = '未设置';
    } else if (this.user.hobby.length < 2) {
      this.hobbyText = this.user.hobby.join('、');
    } else {
      this.hobbyText = this.user.hobby[0] + '、' + this.user.hobby[1] + '等共' + this.user.hobby.length + '种';
    }
  },
  onLoad() {
    console.log(this.user);
    this.getUserInfo();
  },
  methods: {
    ...mapActions('user', {
      getUserInfo: USER_GET_INFO
    }),
    test(e) {
      console.log(e);
      wx.navigateTo({url: '/pages/member/editinfo'});
    },
    editName(e) {
      wx.navigateTo({url: '/pages/member/editname'});
    },
    editMarriage(e) {
      wx.navigateTo({url: '/pages/member/editmarriage'});
    },
    editDate(e) {
      wx.navigateTo({url: '/pages/member/editdate'});
    },
    editFavorite(e) {
      wx.navigateTo({url: '/pages/member/editfavorite'});
    },
    editGender(e) {
      wx.navigateTo({url: '/pages/member/editgender'});
    },
    editChildren(e) {
      wx.navigateTo({url: '/pages/member/editchildren'});
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/mixins/mixins";
@import "../../theme-chalk/_main";

page {
  min-height: 100%;
  background: #f5f5f5;
}
@include b(user) {
  padding-top: 10px;
  min-height: 100%;
  background: #f5f5f5;
  border-top: 1rpx solid #c7c7c7;
}
</style>
